<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    title="无线设备 ＞关联摄像头"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <el-row
          style="margin: 0.5% 0; border: 1px solid #efefef; padding: 0.5%"
        >
          <span style="color: #525e8c">设备编码：</span>
          <span>{{ params.deviceSource }}</span>

          <span style="color: #525e8c; margin-left: 10px">设备名称：</span>
          <span>{{ params.deviceName }}</span>

          <span style="color: #525e8c; margin-left: 10px">设备所在位置：</span>
          <span
            >{{
              params.gridMountFullPathText == null ||
              params.gridMountFullPathText == ''
                ? ''
                : params.gridMountFullPathText + '>>'
            }}{{ params.deviceLocation }}</span
          >
        </el-row>
        <el-row style="padding: 1% 0">
          <el-col :span="12">
            <!-- <div
              v-for="item in cameraList"
              :key="item.id"
              class="botton_div"
              :class="item.streamUrl === srcUrl ? 'botton_action' : ''"
              @click="playVideo(item)"
            >
              <i class="el-icon-video-camera-solid"></i>
              {{ item.cameraLocation }}
            </div>
            <div
              v-if="cameraList.length == 0"
              style="
                display: flex;
                align-items: center;
                font-size: 16px;
                height: 400px;
              "
            >
              此设备无关联摄像头。
            </div> -->

            <div
              class="container-main"
              style="position: relative; width: 100%; overflow: auto"
              :style="{ height: videoAreaHeight + 'px' }"
            >
              <div
                style="
                  display: flex;
                  flex-wrap: wrap;
                  height: 100%;
                  width: 100%;
                "
              >
                <div
                  style="
                    width: 31%;
                    margin-right: 8px;
                    margin-bottom: 8px;
                    border: 1px solid #d8d8d8;
                    padding: 5px;
                    border-radius: 2px;
                  "
                  :style="{ height: videoAreaHeight / 3 - 8 + 'px' }"
                  v-for="(item, index) in cameraList"
                  :key="index"
                  @click="playVideo(item)"
                >
                  <iframe
                    :src="item.streamUrl"
                    frameborder="0"
                    style="width: 100%; height: 100%; pointer-events: none"
                    allowfullscreen
                    allow="autoplay; fullscreen; microphone;"
                  ></iframe>
                </div>

                <div
                  v-if="cameraList.length == 0"
                  style="
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    lex: 1;
                    height: 100%;
                    width: 100%;
                    justify-content: center;
                  "
                >
                  此设备无关联摄像头。
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              style="position: relative; width: 100%"
              :style="{ height: videoAreaHeight + 'px' }"
            >
              <!-- <LivePlayer :videoUrl="players.videoUrl"
                          :poster="players.poster"
                          :controls="players.bControls"
                          :loading.sync="players.bLoading"
                          live
                          muted
                          stretch
                          autoplay
                          aspect="fullscreen"
                          element-loading-text="加载中..."
                          element-loading-background="#000">
              </LivePlayer> -->
              <!-- <iframe
                :src="srcUrl"
                height="100%"
                width="100%"
                allowfullscreen
                allow="autoplay; fullscreen; microphone;"
              ></iframe> -->

              <iframe
                :src="srcUrl"
                frameborder="0"
                style="width: 100%; height: 100%"
                allowfullscreen
                allow="autoplay; fullscreen; microphone;"
              ></iframe>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px"
          @click="onClose"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          确认
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import dataDetailMixins from '@/mixins/data-detail-mixins'
import deviceManageApi from '@/api/device-manage'

// import LivePlayer from '@liveqing/liveplayer'
export default {
  components: {
    // LivePlayer
    deviceManageApi,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // title: {
    //   type: String,
    //   default: '',
    // },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      submitLoading: false,
      cameraList: [],
      videoAreaHeight: this.getHeight(),
      // players: {
      //   serial: '',
      //   code: '',
      //   videoUrl: '', // process.env.VUE_APP_VIDEO_API + 'uploads/image/vidio/222.mp4',
      //   protocol: '',
      //   poster: '', // 视频封面图片 String default ''
      //   bLoading: true, // 指示加载状态, 支持 sync 修饰符
      //   bCloseShow: true,
      //   bControls: true, // 显示播放器控制栏 Boolean default true
      //   bSmart: true,
      //   bFullscreen: true,
      //   closeTimer: 0,
      //   device_id: '',
      //   device_name: ''
      // },

      srcUrl: '',
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.onClose()
      },
    },
  },
  mounted() {
    this.initEquipmentCamera()
  },
  methods: {
    getHeight() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      return clientHeight - 350
    },
    initEquipmentCamera() {
      // this.$get('/console/equipmentCamera', {
      //   gridMount: this.params.gridMount,
      // }).then((res) => {
      //   this.cameraList = res.data.data
      // })
      const data = {
        equipmentId: this.params.id,
        isNeedCameraMsg: true,
      }
      deviceManageApi.getCameraBindEquipment(data).then((res) => {
        this.cameraList = res.data.data
        if (this.cameraList.length != 0) {
          this.srcUrl = this.cameraList[0].streamUrl
        }
      })
    },

    playVideo(data) {
      this.srcUrl = data.streamUrl
    },

    toSubmit() {
      deviceManageApi
        .updateDevice({
          ...this.params,
          streamUrl: this.srcUrl,
        })
        .then((res) => {
          console.log(res)
          this.onClose()
        })
    },
    onClose() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
.botton_div {
  cursor: pointer;
  margin: 3% 3% 3% 0;
  background: #fff;
  border-radius: 5px;
  padding: 5px;
}
.botton_action {
  background: #bad2ff;
}

/deep/.el-dialog {
  width: 70%;
  box-shadow: 0 0 25px #5592f3;
}

/deep/ .el-dialog__header {
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
}

/deep/.el-dialog__title {
  margin: 0;
  color: #4f556e; // #4f556e; rgba(0, 0, 0, .85)
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  word-wrap: break-word;
}

/deep/.el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 18px;
}

/deep/.el-dialog__body {
  word-break: break-all;
  padding: 0 12px 12px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
/deep/ .el-footer {
  box-sizing: border-box;
  flex-shrink: 0;
  border-top: 1px solid #e8e8e8;
  width: calc(100% + 24px);
  margin-top: 5px;
  margin-left: -12px;
  padding: 12px 0px 0px 0px;
  height: 50px !important;
  text-align: center;
}
</style>
